<template>
  <!-- 比亚迪各省销量地图 -->
  <div id="bydmap"  style="width: 800px; height: 450px"></div>
</template>

<script>
export default {
  methods: {
    initByd() {
      var myChart = this.$echarts.init(document.getElementById('bydmap'));
      // 进行相关配置
      var option = {
        toolbox: {
          show: true,
           feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true, backgroundColor: 'black' }
          },
          iconStyle: {
             borderColor: 'white'
          },
          right: 'auto'
        },  
        title: {
          show:true,
          text: '全国销量情况',
          left: 'auto',
          textStyle: {
            color: 'orange'
          }
        }, 
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: {
          type: 'map',
          // 地理坐标系组件用于地图的绘制
          map: "USA PopEstimates", // 表示美国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
          label: {
            show: true,
            color: 'white'
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            borderColor: "rgba(0, 0, 0, 0.2)",
            emphasis: {
              // 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "map",
            map: 'USA PopEstimates',
            geoIndex: 0,
            label: {
              show: true,
            },
            // 这是需要配置地图上的某个地区的数据（下面是定义的假数据）
            data: [
            { name: 'Alabama', value: 4822023 },
          { name: 'Alaska', value: 731449 },
          { name: 'Arizona', value: 6553255 },
          { name: 'Arkansas', value: 2949131 },
          { name: 'California', value: 38041430 },
          { name: 'Colorado', value: 5187582 },
          { name: 'Connecticut', value: 3590347 },
          { name: 'Delaware', value: 917092 },
          { name: 'District of Columbia', value: 632323 },
          { name: 'Florida', value: 19317568 },
          { name: 'Georgia', value: 9919945 },
          { name: 'Hawaii', value: 1392313 },
          { name: 'Idaho', value: 1595728 },
          { name: 'Illinois', value: 12875255 },
          { name: 'Indiana', value: 6537334 },
          { name: 'Iowa', value: 3074186 },
          { name: 'Kansas', value: 2885905 },
          { name: 'Kentucky', value: 4380415 },
          { name: 'Louisiana', value: 4601893 },
          { name: 'Maine', value: 1329192 },
          { name: 'Maryland', value: 5884563 },
          { name: 'Massachusetts', value: 6646144 },
          { name: 'Michigan', value: 9883360 },
          { name: 'Minnesota', value: 5379139 },
          { name: 'Mississippi', value: 2984926 },
          { name: 'Missouri', value: 6021988 },
          { name: 'Montana', value: 1005141 },
          { name: 'Nebraska', value: 1855525 },
          { name: 'Nevada', value: 2758931 },
          { name: 'New Hampshire', value: 1320718 },
          { name: 'New Jersey', value: 8864590 },
          { name: 'New Mexico', value: 2085538 },
          { name: 'New York', value: 19570261 },
          { name: 'North Carolina', value: 9752073 },
          { name: 'North Dakota', value: 699628 },
          { name: 'Ohio', value: 11544225 },
          { name: 'Oklahoma', value: 3814820 },
          { name: 'Oregon', value: 3899353 },
          { name: 'Pennsylvania', value: 12763536 },
          { name: 'Rhode Island', value: 1050292 },
          { name: 'South Carolina', value: 4723723 },
          { name: 'South Dakota', value: 833354 },
          { name: 'Tennessee', value: 6456243 },
          { name: 'Texas', value: 26059203 },
          { name: 'Utah', value: 2855287 },
          { name: 'Vermont', value: 626011 },
          { name: 'Virginia', value: 8185867 },
          { name: 'Washington', value: 6897012 },
          { name: 'West Virginia', value: 1855413 },
          { name: 'Wisconsin', value: 5726398 },
          { name: 'Wyoming', value: 576412 },
          { name: 'Puerto Rico', value: 3667084 }
         ],
          },
        ],
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
           formatter(params, ticket, callback) {
          // params.data 就是series配置项中的data数据遍历
             let localValue, perf, downloadSpeep, usability, point;
             if (params.data) {
                 localValue = params.data.value;
             } else {
               // 为了防止没有定义数据的时候报错写的
                 localValue = 0;
             }
             let htmlStr = `
             <div style='font-size:14px;'> ${params.name}</div>
             <br/>
             <p style='text-align:left;margin-top:-10px;'>
               销量：${localValue}<br/>
             </p>
           `;
             return htmlStr;
           },
           backgroundColor:"#ff7f50",//提示标签背景颜色
           textStyle:{color:"#fff"} //提示标签字体颜色
        },
        // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
        visualMap: {
          // 左下角的颜色区域
          type: "piecewise", // 定义为分段型 visualMap
          min: 0,
          max: 1000,
          itemWidth: 40,
          bottom: 10,
          left: 10,
          textStyle: {
            color: 'white'
          },
          pieces: [
            // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，
            // 以及每一段的文字，以及每一段的特别的样式
            { gt: 400, label: ">400", color: "#f31124" }, // (1000, ]
            { gte: 100, lte: 200, label: "100-200", color: "rgb(25, 133, 25)" }, 
            { gte: 50, lte: 99, label: "50-99", color: "rgb(185, 132, 33)" }, 
            { gte: 5, lte: 49, label: "5-49", color: "rgb(44, 197, 218)" }, 
            { lt: 5, label: "<5", color: "rgb(192, 141, 150)" },
          ],
        },
      };
      // 使用刚指定的配置项和数据显示地图数据
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initByd()
  },
}
</script>

<style>

</style>